@import '../vendors/bootstrap/less/mixins'; 
@import '../less/mixin';
@import '../less/variables';

.skin-switch {
	position: absolute;
    right: 45px;
    bottom: 23px;
    z-index: 1;
    
    .btn {
        background: #fff;
        width: 40px;
        height: 40px; 
        border-radius: 50%;
        font-size: 16px;
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .dropdown-menu {
        min-width: 120px;
        height: 120px;
        border-radius: 50%;
        width: 120px;
        top: -40px;
        left: -40px;
        z-index: 1;
        .transform-origin(center);
        .scale-rotate(0, -360deg);
        .transition-duration(500ms); 
        
        .ss-skin {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            cursor: pointer;
            position: absolute;

            &:hover {
                .opacity(0.8);
            }

            &:nth-child(1) {
                margin-left: -8px;
                top: 12px;
                left: 50%;
            }
            &:nth-child(2) {
                right: 24px;
                top: 26px;
            }


            &:nth-child(3) {
                top: 50%;
                margin-top: -8px;
                right: 12px;
            }

            &:nth-child(4) {
                right: 24px;
                bottom: 26px;
            }

            &:nth-child(5) {
                margin-left: -8px;
                bottom: 12px;
                left: 50%;
            }

            &:nth-child(6) {
                left: 24px;
                bottom: 26px;
            }

            &:nth-child(7) {
                top: 50%;
                margin-top: -8px;
                left: 12px;
            }

            &:nth-child(8) {
                left: 24px;
                top: 26px;
            }
        }
    }

    .dropdown.open {
        .dropdown-menu {
            .scale-rotate(1, 0deg);
        }
    }
}



.bgm-lightblue {
    .background-color(@q-lightblue);
}

.bgm-bluegray {
    .background-color(@q-bluegray);
}

.bgm-cyan {
    .background-color(@q-cyan);
}

.bgm-teal {
    .background-color(@q-teal);
}

.bgm-green {
    .background-color(@q-green);
}

.bgm-orange {
    .background-color(@q-orange);
}

.bgm-blue {
    .background-color(@q-blue);
}

.bgm-purple {
    .background-color(@q-purple);
}